<template>
  <div class="dashboard-root">
    <el-card>
      <div>欢迎，{{ staff.name }}（工号：{{ staff.staffNo }}）</div>
      <div>分组：{{ staff.groups?.join('、') }} | 角色：{{ staff.roles?.join('、') }}</div>
      <div>
        当前状态：
        <el-tag :type="staff.status === 'active' ? 'success' : 'info'">{{ staff.status === 'active' ? '在岗' : '离岗' }}</el-tag>
        <el-button size="small" @click="toggleStatus">{{ staff.status === 'active' ? '切换为离岗' : '切换为在岗' }}</el-button>
      </div>
      <div style="margin-top: 20px;">
        <el-button v-if="hasPerm('chat')" type="primary">接待客户</el-button>
        <el-button v-if="hasPerm('ticket')" type="success">工单管理</el-button>
        <el-button v-if="hasPerm('report')" type="warning">数据报表</el-button>
        <el-button v-if="hasPerm('profile')" type="info">个人信息</el-button>
      </div>
    </el-card>
  </div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()
const staff = ref<any>(JSON.parse(window.localStorage.getItem('currentStaff') || '{}'))

function toggleStatus() {
  staff.value.status = staff.value.status === 'active' ? 'inactive' : 'active'
  window.localStorage.setItem('currentStaff', JSON.stringify(staff.value))
}
function hasPerm(key: string) {
  return staff.value.permissions?.includes(key)
}
</script>
<style scoped>
.dashboard-root {
  min-height: 100vh;
  background: #f5f5f5;
  padding: 40px;
}
</style> 